<template>
  <div class="wrapper">
    <div class="title">
      <h3>历史搜索</h3>
      <div class="delete"
           @click="handleDelete">
        <i class="iconfont">&#xe63b;</i>
      </div>
    </div>
    <div class="history">
      <div class="his-list"
           v-if="history.length > 0">
        <p class="his-item"
           v-for="(item, index) of history"
           :key="index">
          <span border-radius
                @click="handleSearch(item)">{{item}}</span>
        </p>
      </div>
    </div>
    <div class="title">
      <h3>热门搜索</h3>
    </div>
    <div class="history">
      <div class="his-list"
           v-if="hot.length > 0">
        <p class="his-item"
           v-for="(item, index) of hot"
           :key="index">
          <span border-radius
                @click="handleSearch(item.shop_name)">{{item.shop_name}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'SearchHistory',
  data () {
    return {
      history: [],
      hot: []
    }
  },
  methods: {
    getHistory () {
      const history = JSON.parse(this.$localStorage.get('searchHis'))
      if (history != null) {
        this.history = history
      } else {
        return false
      }
    },
    handleDelete () {
      this.history = []
      let searchHis = []
      this.$localStorage.set('searchHis', JSON.stringify(searchHis))
    },
    handleSearch (item) {
      const searchParams = { name: item, sort: 'sort', id: 0 }
      this.getSearch(item)
      this.searchHistory(item)
      this.changeSearchParams(searchParams)
      this.$router.push({
        path: `/result`,
        query: {
          name: item,
          sort: 'sort'
        }
      })
    },
    searchHistory (value) {
      let searchHis = JSON.parse(this.$localStorage.get('searchHis'))
      if (searchHis != null) {
        searchHis.push(value)
        searchHis = [...new Set(searchHis)]
        this.$localStorage.set('searchHis', JSON.stringify(searchHis))
      } else {
        let search = []
        search.push(value)
        search = [...new Set(search)]
        this.$localStorage.set('searchHis', JSON.stringify(search))
      }
    },
    getSearch (value) {
      let locationData = JSON.parse(this.$localStorage.get('locationData'))
      if (locationData != null) {
        locationData = Object.assign({}, locationData, { cate_id: 0, shop_name: value, order: 'sort' })
        this.$api.search.getSearchResult({ ...locationData })
          .then(this.getSearchSucc)
          .catch((e) => {
            console.log(e)
          })
      }
    },
    getSearchSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        const data = res.data
        this.changeSearchResult(data)
      }
    },
    getHot () {
      this.$api.search.getHotSearch()
        .then(this.getHotSucc)
        .catch((e) => {
          console.log(e)
        })
    },
    getHotSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.hot = data
      }
    },
    ...mapMutations({
      changeSearchResult: 'changeSearchResult',
      changeSearchParams: 'changeSearchParams'
    })
  },
  activated () {
    this.getHistory()
    this.getHot()
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  padding-left 40px
  padding-right 40px
  box-sizing border-box

  .title
    font-size $smallFz
    color $graySecond
    display flex
    justify-content space-between
    margin-bottom 20px

    h3
      font-weight normal
      color $fzColor
      font-size $fzFourthly

    i
      font-size font-size $fzFourthly

  .history
    margin-bottom 20px
    width 100%

    .his-list
      width 100%
      display flex
      flex-wrap wrap
      align-items center

      .his-item
        min-width 0
        margin-left 10px
        margin-right 10px

        span
          padding-left 20px
          padding-top 10px
          padding-bottom 10px
          padding-right 20px
          box-sizing border-box
          display inline-block
          color $graySeventh
          font-size $smallFz
          min-width 100px
          text-align center

  [border-radius]::before
    border-radius 60px
    border-color #DCDCDC
</style>
